@import './source.scss';

.panel8 {
    background-color: #FFF587;
    color: #666;

    @media(max-width: $media-screen-width) {
        height: 150vh;
    }

    >h2 {
        text-align: center;
        width: 100%;
        font-size: 43px;
        font-weight: 400;
        margin: 10vh 0;
        letter-spacing: .15em;
        color: #444;

        @media(max-width: $media-screen-width) {
            font-size: 28px;
        }
    }

    >div {
        display: flex;
        justify-content: space-around;
        flex-direction: row;

        @media(max-width: $media-screen-width) {
            flex-direction: column;
            // text-align: center;
        }

        >.group {
            .title {
                font-weight: 400;
                font-size: 28px;
                color: #333;

                @media(max-width: $media-screen-width) {
                    font-size: 22px;
                }
            }

            >ul {
                list-style: none;
            }

            @media(max-width: $media-screen-width) {
                margin: 0 10px;
                padding: 3vh 0;
                border-top: #333 dashed 1px;
            }
        }

        @media(min-width: $media-screen-width) {
            >.group {
                width: 40vw;
                margin-top: 5vh;
            }
        }
    }

    .item {
        >h4 {
            font-weight: 400;
            font-size: 24px;
            color: #444;

            @media(max-width: $media-screen-width) {
                font-size: 20px;
            }
        }

        >p {
            font-size: 20px;

            @media(max-width: $media-screen-width) {
                font-size: 18px;
            }
        }
    }

}